<template>
  <div>
    <site-nav />
    <div class="head-item">
      <head-item />
    </div>
    <div class="content">
      <div class="container">
        <div class="header-container">
          <div class="title">查看清单</div>
          <div class="approval-details">
            <div class="approval-order">
              <span>预选单号：</span><span v-text="orderBatch" />
            </div>
            <div class="approval-status">
              <div class="status">
                <span v-if="approval.status">审核状态：同意</span>
                <span v-else>审核状态：不同意</span>
              </div>
              <div class="approver">
                <span>审核人：</span><span v-text="formatRemark(approval)">13265034453</span>
              </div>
              <div class="time">
                <span>审核时间：</span><span v-text="approval.createTime">2018年11月4日 16：23：26</span>
              </div>
            </div>
            <div class="approval-opinion">
              <span>审批意见：</span><span v-text="approval.context">不可购买这些</span>
            </div>
          </div>
        </div>
        <div class="goods-info">
          <div>商品信息</div>
          <div>单价 (元)</div>
          <div>数量</div>
          <div>小计 (元)</div>
        </div>
        <div v-for="(store,j) in list" :key="j" class="order-item">
          <div class="monopoly-container">
            <div class="title">
              <img src="../../assets/images/shop.png" alt>
              <div v-text="store.sellerName">仪器仪表专卖</div>
            </div>
            <div v-for="(repository, k) in store.repositoryVos" :key="k" class="goods-list">
              <h3 class="stock-name" v-text="repository.repositoryName">仓库名称</h3>
              <div v-for="(item, m) in repository.merchandiseVos" :key="m" class="goods-item">
                <img :src="item.mainImage" alt>
                <div class="item-info">
                  <div class="name" v-text="item.childCategoryName">钢管</div>
                  <div v-if="item.standardProa && item.proAVal" class="mark" v-text="item.standardProa + '：' + item.proAVal">标 号：外16内6.03</div>
                  <div v-if="item.standardProb && item.proBVal" class="mark" v-text="item.standardProb + '：' + item.proBVal">标 号：外16内6.03</div>
                  <div v-if="item.standardProc && item.proCVal" class="mark" v-text="item.standardProc + '：' + item.proCVal">标 号：外16内6.03</div>
                  <div v-if="item.standardProd && item.proDVal" class="mark" v-text="item.standardProd + '：' + item.proDVal">标 号：外16内6.03</div>
                  <div v-if="item.standardProe && item.proEVal" class="mark" v-text="item.standardProe + '：' + item.proEVal">标 号：外16内6.03</div>
                </div>
                <div class="price" v-text="item.productPrice.toFixed(2) + '/' + item.unit">58.00</div>
                <!-- <div class="numble">
              <span class="comment">-</span>
              <span>1</span>
              <span class="comment">+</span>
            </div>-->
                <div class="numble" v-text="item.shopAmount">
                  <!--<el-input-number
                    v-model="num"
                    :min="1"
                    @change="handleChange"
                  />-->
                </div>

                <div class="total-prices" v-text="(item.productPrice * item.shopAmount).toFixed(2)">58.00</div>
              </div>
              <div class="money-container">
                <div class="money-details">
                  <div class="total-money" v-text="`${repository.merchandiseVos.length}件商品，总商品金额：￥${productPrice(repository)}`">2件商品，总商品金额：￥116.00</div>
                  <div class="transportation" v-text="repository.merchandiseVos[0].distance.toFixed(1) + 'km'">运输里程：200.00km</div>
                  <div class="transportation-money">
                    <span>运费总价：</span>
                    <span class="all-money" @click="toFreight(store.sellerId, store.sellerName, repository)" v-text="freightPrice(store.sellerId, repository.repositoryId)">￥20.00></span>
                  </div>
                </div>
                <div class="total-money" v-text="'仓库合计: ' + totalPrice(store.sellerId, repository)">店铺合计：￥116.00</div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>

    <advantage-item />
    <guide-item />
    <friendly-link />
    <footer-item />
  </div>
</template>

<script>
import HeadItem from '../../layout/Header'
import SiteNav from '../../layout/Nav'
import AdvantageItem from '../../layout/Advantage'
import FooterItem from '../../layout/Footer'
import GuideItem from '../../layout/Guide'
import FriendlyLink from '../../layout/FriendlyLink'
// import DetailItem from "./components/DetailItem"
import { FreightData } from '@/js/constant'
import { getApprovalDetail, freight } from '@/api/pre-order/pre-order-of-supervise'
export default {
  name: 'CheckBudgetOrders',
  components: {
    HeadItem,
    SiteNav,
    AdvantageItem,
    FooterItem,
    GuideItem,
    FriendlyLink
    //   DetailItem
  },
  data() {
    return {
      num: 1,
      id: this.$route.query.id,
      orderBatch: this.$route.query.orderBatch,
      approval: {},
      list: [],
      freights: []
    }
  },
  watch: {
    list(value) {
      value.forEach(i => {
        this.freightParam(i)
      })
    }
  },
  created() {
    this.getApproval()
  },
  methods: {
    // 获取审批清单详情
    getApproval() {
      getApprovalDetail(this.id).then(response => {
        if (response.data) {
          this.approval = response.data
          this.list = response.data.list
        }
      })
    },
    // 格式化账户备注
    formatRemark(item) {
      if (item.remark) {
        return item.remark + '(' + item.approveName + ')'
      } else {
        return item.approveName
      }
    },
    toFreight(sellerId, sellerName, repository) {
      const spuList = []
      this.list.filter(i => i.sellerId === sellerId)[0].repositoryVos
        .filter(i => i.repositoryId === repository.repositoryId)[0]
        .merchandiseVos.forEach(i => {
          if (this.invalid(i) && !this.stockOut(i)) {
            const {
              mainImage,
              childCategoryName,
              productPrice,
              shopAmount,
              standardProa,
              standardProb,
              standardProc,
              standardProd,
              standardProe,
              proAVal,
              proBVal,
              proCVal,
              proDVal,
              proEVal,
              unit
            } = i
            const property = []
            if (standardProa && proAVal) {
              property.push({
                name: standardProa,
                value: proAVal
              })
            }
            if (standardProb && proBVal) {
              property.push({
                name: standardProb,
                value: proBVal
              })
            }
            if (standardProc && proCVal) {
              property.push({
                name: standardProc,
                value: proCVal
              })
            }
            if (standardProd && proDVal) {
              property.push({
                name: standardProd,
                value: proDVal
              })
            }
            if (standardProe && proEVal) {
              property.push({
                name: standardProe,
                value: proEVal
              })
            }
            const obj = {
              mainImg: mainImage,
              spuName: childCategoryName,
              price: productPrice,
              unit,
              buyNum: shopAmount,
              property
            }
            spuList.push(obj)
          }
        })
      if (spuList.length <= 0) {
        this.$message.error('暂无需要计算运费的商品')
        return
      }
      const gruopFeeInfoList = this.freights.filter(i => i.sellerId === sellerId && i.reposityId === repository.repositoryId)[0].gruopFeeInfoList
      const totalFee = gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalFee, 0)
      const totalWeight = gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalWeight, 0)
      const totalVolue = gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalVolue, 0)
      const freightData = {
        sellerName: sellerName,
        productList: {
          spuList,
          distance: gruopFeeInfoList[0].distance,
          totalWeight,
          totalVolue,
          totalFee
        }
      }
      sessionStorage.setItem(FreightData, JSON.stringify(freightData))
      this.$router.push('/prepaid')
    },
    handleChange(value) {
      console.log(value)
    },
    // 计算商品总价
    productPrice(repository) {
      return (repository.merchandiseVos.reduce((prev, cur) => prev + (this.invalid(cur) && !this.stockOut(cur) ? cur.shopAmount * cur.productPrice : 0), 0)).toFixed(2)
    },
    freightPrice(sellerId, repositoryId) {
      if (this.freights.length === 0) {
        return '计算中'
      }
      const list = this.freights.filter(i => i.sellerId === sellerId && i.reposityId === repositoryId)
      if (list.length === 0) {
        return '￥' + Number(0).toFixed(2)
      }
      return '￥' + list[0].gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalFee, 0).toFixed(2)
    },
    totalPrice(sellerId, repository) {
      const price = repository.merchandiseVos.reduce((prev, cur) => prev + (this.invalid(cur) && !this.stockOut(cur) ? cur.shopAmount * cur.productPrice : 0), 0)
      if (this.freights.length === 0) {
        return price.toFixed(2)
      }
      const list = this.freights.filter(i => i.sellerId === sellerId && i.reposityId === repository.repositoryId)
      const freightPrice = list.length === 0 ? 0 : list[0].gruopFeeInfoList.reduce((prev, cur) => prev + cur.totalFee, 0)
      return `￥${(freightPrice + price).toFixed(2)}`
    },
    freightParam(store) {
      const data = {
        sellerId: store.sellerId
      }
      const submitInfoList = []
      let flag = false
      store.repositoryVos.forEach(i => {
        const submitInfo = {
          reposityId: i.repositoryId,
          distance: i.merchandiseVos[0].distance
        }
        const spuInfoList = []
        i.merchandiseVos.forEach(j => {
          if (this.invalid(j) && !this.stockOut(j)) {
            flag = true
            spuInfoList.push({
              spuId: j.spuId,
              buyNum: j.shopAmount
            })
          }
        })
        if (spuInfoList.length > 0) {
          submitInfo.spuInfoList = spuInfoList
          submitInfoList.push(submitInfo)
        }
      })
      data.submitInfoList = submitInfoList
      if (flag) {
        this.freight(data)
      }
    },
    freight(data) {
      freight(data).then(res => {
        if (this.tempItem) {
          const { j, k } = this.tempItem
          const sellerId = this.list[j].sellerId
          const repositoryId = this.list[j].repositoryVos[k].repositoryId
          const freights = JSON.parse(JSON.stringify(this.freights))
            .filter(i => i.sellerId !== sellerId && i.repositoryId !== repositoryId)
          this.freights = freights.concat(res.data)
        } else if (data.addressFlag) {
          this.freights = this.freights.concat(res.data)
        } else {
          this.freights = this.freights.concat(res.data)
        }
      }).catch(res => {})
    },
    // false 失效
    invalid(item) {
      return item.status === 5 && item.brandId === item.cartBrandId &&
        item.proAId === item.spuAId && item.proBId === item.spuBId &&
        item.proCId === item.spuCId && item.proDId === item.spuDId && item.proEId === item.spuEId
    },
    // true 缺货
    stockOut(item) {
      return item.skuNum < item.minBuyNum || item.skuNum < item.shopAmount
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .head-item {
  .head {
    border-bottom: 2px solid #ff3b30ff;
  }
}
.content {
  background-color: #f7f7f7;
  padding-bottom: 52px;
  .container {
    .header-container {
      background-color: #fff;
      align-items: center;
      margin: 30px 0 20px 0;
      .title {
        font-weight: 700;
        font-size: 16px;
        height: 57px;
        padding: 17px 0 20px 20px;
        border-bottom: 3px solid #e5e5e5ff;
      }
      .approval-details {
        padding: 15px 18px 20px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 120px;
        color: #6b6b6bff;
        .approval-order {
          font-weight: 700;
          font-size: 16px;
          color: #3d3d3dff;
        }
        .approval-status {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .goods-info {
      margin-bottom: 10px;
      height: 55px;
      background-color: #fff;
      display: flex;
      align-items: center;
      line-height: 44px;
      div:nth-child(1) {
        margin-left: 20px;
      }
      div:nth-child(2) {
        margin-left: 702px;
      }
      div:nth-child(3) {
        margin: 0 102px;
      }
    }
    .order-item {
      .monopoly-container {
        border-bottom: 1px solid #e5e5e5;
        .title {
          padding-left: 20px;
          display: flex;
          align-items: center;
          line-height: 47px;
          height: 47px;
          background-color: #fff;
          border-bottom: 1px solid #e5e5e5;
          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
        .goods-list {
          padding: 18px 20px;
          background-color: #fff;
          //   border-bottom: 3px solid #e5e5e5;
          .goods-item {
            display: flex;
            align-items: center;
            margin-bottom: 14px;
            img {
              width: 83px;
              height: 83px;
              object-fit: cover;
              margin-right: 30px;
            }
            .item-info {
              height: 83px;

              .mark {
                font-size: 12px;
                color: #a7a7aa;
              }
            }
            .price {
              margin-left: 533px;
            }
            .numble {
              margin: 0 103px;
              ::v-deep .el-input-number {
                display: flex;
                width: 68px;
              }
              ::v-deep .el-input-number__decrease {
                width: 17px;
                height: 17px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-right: 1px solid #dcdfe6;
                top: 1px;
                left: 5px;
              }
              ::v-deep .el-input-number__increase {
                width: 17px;
                height: 17px;
                display: flex;
                justify-content: center;
                top: 1px;
                right: 5px;
                align-items: center;
                border-left: 1px solid #dcdfe6;
              }
              ::v-deep .el-input {
                width: 60px;
                height: 21px !important;
                left: 4px;
                // z-index: 100;
              }
              ::v-deep .el-input__inner {
                display: flex;
                width: 60px;
                padding: 0;
                justify-content: center;
                align-items: center;
                height: 19px !important;
                color: #8e8e93;

                border-radius: 0;
              }
              // .comment {
              //   display: flex;
              //   justify-content: center;
              //   align-items: center;
              //   width: 19px;
              //   height: 19px;
              //   color: #8e8e93;
              //   border: 1px solid #f4f5f7;
              //   background-color: #f5f7fa;
              // }
              // span:nth-child(2) {
              //   width: 30px;
              //   height: 19px;
              //   border: 1px solid #f4f5f7;
              //   display: flex;
              //   justify-content: center;
              //   align-items: center;
              //   color: #8e8e93;
              // }
            }
          }
          .goods-item:last-child {
            margin-bottom: 0;
          }
        }
      }
      .money-container {
        margin-bottom: 10px;
        height: 85px;
        padding: 18px 20px;
        display: flex;
        background-color: #fff;
        align-items: flex-end;
        justify-content: space-between;
        flex-direction: column;
        color: #6b6b6b;
        .money-details {
          display: flex;
          .transportation {
            margin: 0 25px;
          }
          .transportation-money {
            .all-money {
              color: #02a9f1;
            }
            .all-money:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
